<template>
  <div>
    <!-- <li v-for="(item, key, index) in items" class="animate" v-bind:key="item.id">{{item.id}}</li> -->
    <div class="active:bg-gray-500  m-3 flex items-center" style="border: 1px solid black;" v-for="(bar, index) in bars"
      url="/pages/user/user" @touchend="handleSwitch(index)">
      <img :src="bar.pic" class="w-8 h-8 m-8">
      <p class="font-bold">
        {{ bar.title }}
      </p>
    </div>
  </div>
</template>

<script setup>
const bars = [
  // {
  //   title: '官方公告',
  //   pic: '../../static/clipboard.png',
  // },
  {
    title: '工匠消息',
    pic: '../../static/worker.png',
  },
  {
    title: '雇主消息',
    pic: '../../static/boss.png',
  }
]

const urls = [
  // '/pages/official_messages/official_messages',
  '/pages/worker_messages/worker_messages',
  '/pages/boss_messages/boss_messages',
]
function handleSwitch(i) {
  uni.navigateTo({ url: urls[i] })
}
</script>